import React, {memo}  from "react";
import type {FC,ReactNode} from "react";

import { RankingWrapper } from "./style";
import AreaHeaderV1 from "@/components/area-header-v1";
import TopRankingItem from "../top-ranking-item/index";
import { shallowEqualApp, useAppSelector } from "@/store";

interface IProps {
    children?:ReactNode
}

const TopRanking:FC<IProps> = ()=>{

    const {rankings = []} = useAppSelector((state)=>{
        return {
            rankings:state.recommand.rankings
        }
    },shallowEqualApp);

    // console.log(rankings);

    return (
        <RankingWrapper>
            <AreaHeaderV1 title="榜单" moreLink="/discover/ranking"></AreaHeaderV1>
            <div className="content">
                {rankings.map((item) => {
                    return <TopRankingItem key={item?.id} itemData={item} />
                })}
            </div>
        </RankingWrapper>
    )
}

export default memo(TopRanking);
